<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4" :xs="24" :sm="8" :lg="3">
        <div style="text-align: center;margin-top: 20px;">
          <div>
            <el-tag style="width: 110px;font-size: 16px;color: #fff;" :color="color[type]">No.{{ index }}</el-tag>
          </div>
          <div style="border: #d7dae2 1px solid;margin-top: 15px;text-align: center;width: 100px;margin-left: auto;margin-right: auto;">
            <div
              :style="{
                color: color[type],
                fontSize: '20px',
                marginLeft: 'auto',
                marginRight: 'auto'
              }"
            >
              <div v-if="type===1">有希望</div>
              <div v-if="type===2">希望很大</div>
              <div v-if="type===3">靠谱</div>
              <div v-if="type===4">非常靠谱</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div>
          <h2>{{ data.academyName }}</h2>
          <div>
            <el-tag type="primary">2017 <i class="el-icon-check" /></el-tag>
            <el-tag type="danger">2018 <i class="el-icon-close" style="color:red" /></el-tag>
            <el-tag>{{ data.classLimit }}</el-tag>
            <el-tag>{{ data.feature }}</el-tag>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <div>
        <h3>{{ data.majorName }}</h3>
        <div>
          <span>学科评分 {{ data.majorRankScore }}</span>
          <span v-if="data.accordWithArea">最想去 </span>
          <span v-if="data.accordWithIntentionMajorFirst">最有意向 </span>
          <span v-if="data.accordWithIntentionMajorSecond">有意向 </span>
          <span v-if="data.accordWithIntentionMajorThird">不排斥 </span>
        </div>
        <div>
          2019年招生计划 {{ data.plan }} 学制 {{ data.regime ? data.regime : '-' }}  学费{{ data.tuition ? data.tuition : '-' }}
        </div>
        <div>
          <span>2018年录取人数 {{ data.count18 }}</span>
          <span>2018年最低位次 {{ data.precedenceMin18 }}</span>
        </div>
        <div>
          <span>2017年录取人数 {{ data.count17 }}</span>
          <span>2017年最低位次 {{ data.precedenceMin17 }}</span>
        </div>
      </div>
    </div>
    <div />
  </div>
</template>

<script>
export default {
  name: 'ResultItem',
  props: {
    data: {
      type: [Object],
      required: true
    },
    scores: {
      type: [Array],
      required: true
    },
    index: {
      type: [Number],
      required: true
    },
    st: {
      type: [String, Number],
      required: true
    },
    type: {
      type: [Number],
      required: true
    }
  },
  data() {
    return {
      color: {
        1: '#F17467',
        2: '#FCC83C',
        3: '#89CC4E',
        4: '#597FF5'
      }
    }
  },
  computed: {
    chartTitle() {
      return [
        { name: '院校实力', max: 5 },
        { name: '区域认可', max: 5 },
        { name: '地域要求', max: 5 },
        { name: '专业吻合', max: 5 },
        { name: '分数吻合', max: 5 },
        { name: '录取稳定', max: 5 }
      ]
    },
    academyScores() {
      return this.scores.filter((v) => {
        return v.academy_code === this.data.acadCode
      })
    }
  },
  methods: {
    handleViewMajor(value, academy) {
      this.$emit('view-major', {
        majors: value,
        academy: academy
      })
    }
  }
}
</script>

<style scoped>

</style>

